<template>
	<view>

		<view class="flex-y tn-p-sm">

			<view class="ta-card">

				<view class="ta-card-body flex-y flex-center">
					<uv-avatar size="220rpx" :src="userinfo.headimg" @click="setAvatar" />
					<text class="ta-desc-text tn-mt-sm" @click="setAvatar">修改头像</text>
				</view>

				<view class="ta-card-foot flex-x-between" @click="setNickname">
					<text>用户昵称：{{ userinfo.nickname }}</text>
					<uv-icon name="arrow-right" />
				</view>

				<!-- </view>

				<view class="ta-card"> -->

				<!-- <view class="ta-card-head">
					<text class="tn-text-bold">设备信息</text>
				</view> -->

				<view class="ta-card-foot flex-x-between">
					<text>终端类型：{{ account.type_name || account.type }}</text>
					<text class="ta-water-text flex-center">{{ account.type.toUpperCase() }}</text>
				</view>

				<view class="ta-card-foot flex-x-between">
					<text>终端账号：{{ account.phone || account.nickname }}</text>
					<text class="ta-water-text flex-center">USID#{{ account.id }}</text>
				</view>

				<view class="ta-card-foot flex-x-between">
					<text>关联账号：{{ userinfo.code }}</text>
					<text class="ta-water-text flex-center">UNID#{{ account.unid }}</text>
				</view>

				<view class="ta-card-foot flex-x-between">
					<text>账号等级：{{ relation.level_name }}</text>
					<text class="ta-water-text flex-center">VIP{{ relation.level_code }}</text>
				</view>

				<view class="ta-card-foot flex-x-between">
					注册时间：{{ userinfo.create_time }}
				</view>

			</view>

			<view class="footbox">
				<uv-transition :show="true" mode="slide-left">
					<view class="tn-pt-xl flex-center">
						<uv-button @click="logout" shape="circle" type="error" text="退出登录"
							customStyle="width:500rpx;height:90rpx" />
					</view>
				</uv-transition>

				<uv-transition :show="true" mode="slide-right">
					<view class="tn-pt-xl flex-center">
						<uv-button @click="unbind" shape="circle" type="primary" text="解绑账号"
							customStyle="width:500rpx;height:90rpx" />
					</view>
				</uv-transition>
			</view>

		</view>

	</view>
</template>

<script lang="ts">

import { defineComponent } from 'vue'
import { TaUseAccount, TaToast, TaDataBase, TaDataOrder, TaDataUser, TaImageToBase64, TaLoading } from '@/utils';

export default defineComponent({
	setup() {
		return TaUseAccount()
	},
	data() {
		return {
			orders: TaDataOrder.types()
		}
	},
	created() {
		TaDataBase.page('个人中心', true)
	},
	onShow() {
		this.loadData();
	},
	onPullDownRefresh() {
		this.loadData()
		this.orders = TaDataOrder.types()
		setTimeout(() => uni.stopPullDownRefresh(), 1000)
	},
	methods: {
		// 加载数据
		loadData() {
			this.loadUser()
		},
		// 退出登录
		logout() {
			TaToast.confirm('确定要退出登录吗？').then(() => {
				TaDataUser.logout()
			})
		},
		// 解绑账号
		unbind() {
			TaToast.confirm('确定要解绑账号吗？').then(() => {
				TaDataUser.unbind()
			})
		},
		// 设置头像
		setAvatar() {
			uni.chooseImage({
				count: 1, sourceType: ['album'], complete: (res: any) => {
					TaLoading.show('上传头像...');
					let blob: any = res.tempFilePaths[0]
					TaImageToBase64(blob, 500).then((img: any) => {
						TaDataUser.my.setting({ headimg: img }).then(() => this.loadUser()).finally(() => TaLoading.hide())
					}).catch(() => TaLoading.hide())
				}
			})
		},
		// 设置昵称
		setNickname() {
			TaToast.error('开发中...')
		},
	}
})
</script>